<template>
  <div class="login">
    <img src="../assets/login-logo.png" class="logo" />
    <el-card shadow>
      <h1>
        幕童有课Q·MIS登录
      </h1>
      <el-form :model="loginForm" :rules="loginRule" ref="loginForm">
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model.trim="loginForm.username"
            size="normal"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model.trim="loginForm.password"
            placeholder="密码"
            @keyup.native.enter="loginSubmit"
            size="normal"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="remember">记住我</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-top: 10px"
            type="primary"
            @click.native.prevent="loginSubmit"
            :loading="loginLoading"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import { JSEncrypt } from 'jsencrypt';
  import { FormRuleConf } from '@/config';
  import { LoginMixins } from '@zeesuu/login';
  import { mapGetters, mapActions } from 'vuex';
  import { routeReadyHandler } from '@/router';

  const LOCAL_LOGIN_INFO_KEY = 'login';
  const LOCAL_LOGIN_REMEMBER = 'remember';

  const encryptor = new JSEncrypt();
  encryptor.setPublicKey(process.env.VUE_APP_PUBLIC_KEY);

  export default {
    mixins: [LoginMixins],
    data() {
      return {
        remember: false,
        ...FormRuleConf.Login,
      };
    },
    computed: {
      ...mapGetters(['$menu', '$permission']),
    },
    mounted() {
      try {
        const loginInfo = window.localStorage.getItem(LOCAL_LOGIN_INFO_KEY);
        this.remember = !!window.localStorage.getItem(LOCAL_LOGIN_REMEMBER);

        if (loginInfo) {
          this.loginForm = {
            ...JSON.parse(loginInfo),
          };
        }
      } catch {}
    },
    methods: {
      /**
       * 登录
       */
      loginSubmit() {
        if (this.loginLoading) return;

        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loginLoading = true;

            const loginInfo = {
              ...this.loginForm,
              password: this.encryptedData(this.loginForm.password),
            };

            this.$service
              .AuthLogin(loginInfo)
              .then((res) => {
                this.$setUserInfo(res.user);
                this.$setToken(res.token);
                this.$setMenus(res.menus);
                this.$setPermission(res.permissions);
                routeReadyHandler();
                if (this.remember) {
                  window.localStorage.setItem(LOCAL_LOGIN_INFO_KEY, JSON.stringify(this.loginForm));
                  window.localStorage.setItem(LOCAL_LOGIN_REMEMBER, '1');
                } else {
                  window.localStorage.removeItem(LOCAL_LOGIN_INFO_KEY);
                  window.localStorage.removeItem(LOCAL_LOGIN_REMEMBER);
                }

                if (this.redirect.match(/settoken$/)) {
                  window.location.href = `${this.redirect}?token=${res.token}`;
                } else if (this.redirect) {
                  window.location.href = this.redirect;
                } else {
                  this.$router.replace({ path: '/d' });
                }
              })
              .finally(() => {
                this.loginLoading = false;
              });
          }
        });
      },
      /**
       * 加密
       */
      encryptedData(data) {
        return encryptor.encrypt(data);
      },
      ...mapActions(['$setMenus', '$setPermission']),
    },
  };
</script>

<style lang="less" scoped>
  .login {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../assets/bg.jpg) top left no-repeat;
    background-size: cover;
    min-height: 100vh;
    padding-top: 100px;

    .logo {
      transform: scale(1.5);
    }

    .el-card {
      margin-top: 100px;
      width: 490px;
      background-color: rgba(255, 255, 255, 0.1);
      border: none;
      padding: 10px 30px 30px;
      border-radius: 10px;

      &:hover {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
      }

      h1 {
        font-size: 20px;
        color: #ebebeb;
        text-align: center;
        font-weight: bolder;
        padding: 20px 0 40px;
        user-select: none;
      }

      /deep/ .el-input__inner {
        height: 50px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: transparent;
        border-radius: 25px;
        color: white;
      }

      .el-button {
        width: 100%;
        height: 50px;
        background: #ffc600;
        border-radius: 25px;
        font-size: 16px;
        font-weight: 400;
        color: #292929;
        border: none;
      }
    }
  }
</style>
